<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui">

    <center>

        <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>  

        <p:dialog appendToBody="true" resizable="false" modal="true" widgetVar="statusDialog" header="#{messages['ajax.status']}"   
                  draggable="false" closable="false">  
            <p:graphicImage value="resources/images/ajax-loader.gif" />
        </p:dialog>
        
            <script type="text/javascript">
                $(function() {
                    $("#searchText").suggest();
                })
                .bind("fb-select", function(e, data) {
                    $("#searchText").val(data.name + " (" + data.id + ")");
                });
            </script>
        
            <style>
                .ui-dialog .ui-widget .ui-widget-content .ui-corner-all .ui-shadow .ui-draggable .ui-overlay-visible {
                    z-index: 10!important;
                 }
                 .ui-widget-overlay{
                     z-index: 5!important;
                 }
                 
               
            </style>

        <h:form id="searchForm" prependId="false" >
            <p:growl id="searchGrowl" showDetail="true" showSummary="false" life="5000" redisplay="false"  />
            <h:outputText value="Search:"/>
            
            <p:inputText autocomplete="on" id="searchText" value="#{webResourceBean.searchText}" />
            <p:commandButton id="searchSubmit" value="Submit" update="searchResults :guestNewContentID :newsFeedPanel" action="#{webResourceBean.search}"/>

            <h:panelGrid id="searchResults" columns="1" cellpadding="10"> 
                <center>
                    <p:fieldset rendered="#{webResourceBean.searchFinished}" legend="Search Results">  


                        <p:dataList value="#{webResourceBean.searchResults}" var="webResource" id="searchResultTableID"  
                                    paginator="true" rows="20"  
                                    paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown}"  
                                    rowsPerPageTemplate="10,20,30" type="none">  

                            <f:facet name="header">  
                                Course Results - #{webResourceBean.searchText}
                            </f:facet>  

                            <p:commandButton icon="ui-icon-search" update=":dialogID" oncomplete="webResourceDialog.show()" title="View Detail">  
                                <f:setPropertyActionListener value="#{webResource}" target="#{webResourceBean.selectedResult}" />  
                            </p:commandButton>  

                            <h:outputText value="#{webResource.title}" style="margin-left:10px" />  
                            
                            <h:outputText value="#{webResource.institutionText}" style="margin-left:10px" />  
                            
                            <h:outputText rendered="#{not empty webResource.lessons}" value=" (All Lessons) " style="margin-left:10px" /> 
                            <h:outputText rendered="#{empty webResource.lessons}" value=" COURSE " style="margin-left:10px" /> 
                            
                            <br />  
                        </p:dataList>  
                        
                        <br/>
                        <br/>
                        <p:dataList value="#{webResourceBean.lessonResults}" var="lesson" id="lessonResultTableID"  
                                    paginator="true" rows="20"  
                                    paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown}"  
                                    rowsPerPageTemplate="10,20,30" type="none">  

                            <f:facet name="header">  
                                Lesson Results - #{webResourceBean.searchText}
                            </f:facet>  

                            <h:outputLink id="lessonUrl" value="#{lesson.url}" target="_blank" >
                                <h:outputText value="#{lesson.title}"/>
                            </h:outputLink>
                            
                            
                            <br />  
                        </p:dataList> 

                    </p:fieldset>
                </center>
            </h:panelGrid>  




        </h:form>

        <p:dialog hideEffect="explode" style="z-index:10!important" appendToBody="true" header="Result Detail" resizable="false" width="700" height="800" widgetVar="webResourceDialog" modal="true" showEffect="fade">  
            <h:form id="dialogID">
                <script type="text/javascript">
                    $(function() {
                        $('#dialogID\\:tagThisText').suggest(); 
                    });
                </script>
                <p:growl id="dialogGrowl" showDetail="true" showSummary="false" life="5000" redisplay="false"  />
                <p:outputPanel id="webResourceDetail" style="text-align:center;" layout="block">  

                    <p:graphicImage value="resources/images/courseType#{webResourceBean.selectedResult.webResourceTypeId}.jpeg"/>  
                    
                    <h:panelGrid  columns="2" cellpadding="5">  

                        <h:outputLabel value="" />
                        <h:panelGrid>  
                            <p:commandButton rendered="#{loginBean.loggedIn and !webResourceBean.selectedResult.favorited}" id="addToFavButton" value="Add to Favorites" update=":dialogID:dialogGrowl addToFavButton removeFromFavButton" action="#{webResourceBean.addToFavorite}"/>
                            <p:commandButton rendered="#{loginBean.loggedIn and webResourceBean.selectedResult.favorited}" id="removeFromFavButton" value="Remove From Favorites" update=":dialogID:dialogGrowl addToFavButton removeFromFavButton" action="#{webResourceBean.removeFromFavorite}"/>
                        </h:panelGrid>  
                        
                        <h:outputLabel style="font-weight: bold" for="id" value="ID: " />  
                        <h:outputText id="id" value="#{webResourceBean.selectedResult.id}" />  

                        <h:outputLabel style="font-weight: bold" for="title" value="Title: " />  
                        <h:outputText id="title" value="#{webResourceBean.selectedResult.title}" />  

                        <h:outputLabel style="font-weight: bold" for="description" value="Description: " />  
                        <h:outputText id="description" value="#{webResourceBean.selectedResult.description}" />  

                        <h:outputLabel style="font-weight: bold" for="url" value="URL: " />
                        <h:outputLink id="url" value="#{webResourceBean.selectedResult.url}" target="_blank" >
                            <h:outputText value="#{webResourceBean.selectedResult.url}"/>
                        </h:outputLink>
                        
                        <h:outputLabel style="font-weight: bold" rendered="#{webResourceBean.selectedResult.webResourceTypeId eq 1}" for="instructors" value="Instructors: " />  
                        <h:outputText rendered="#{webResourceBean.selectedResult.webResourceTypeId eq 1}" id="instructors" value="#{webResourceBean.selectedResult.instructorsText}" />  

                        <h:outputLabel style="font-weight: bold" rendered="#{webResourceBean.selectedResult.webResourceTypeId eq 1}" for="institution" value="Institution: " />  
                        <h:outputText rendered="#{webResourceBean.selectedResult.webResourceTypeId eq 1}" id="institution" value="#{webResourceBean.selectedResult.institutionText}" />  

                        <h:outputLabel style="font-weight: bold" for="averageRating" value="Average Rating: " />  
                        <h:panelGroup>  
                            <p:rating id="averageRatingInt" value="#{webResourceBean.selectedResult.averageRatingInt}" readonly="true" />  
                            <h:outputText id="averageRating" value="(#{webResourceBean.selectedResult.averageRating})" />  
                            <h:outputText style="margin-left: 20px;" id="totalRatingCount" value="(#{webResourceBean.selectedResult.ratingCount} vote(s))" />  
                        </h:panelGroup>  
                        
                        <h:outputLabel style="font-weight: bold" for="insertDate" value="Added Date: " />  
                        <h:outputText id="insertDate" value="#{webResourceBean.selectedResult.insertDate}" />  

                        <h:outputLabel style="font-weight: bold" for="tags" value="Tags: " />  
                        <h:outputText id="tags" value="#{webResourceBean.selectedResult.tagsText}" />  

                        <h:outputLabel rendered="#{loginBean.loggedIn}" style="font-weight: bold" for="rate" value="Rate: " />  

                        <h:panelGroup rendered="#{loginBean.loggedIn}" >  
                            <p:rating id="rate" value="#{webResourceBean.rate}">  
                                <p:ajax event="rate" listener="#{webResourceBean.onRate}" update=":dialogID:dialogGrowl :dialogID:averageRating :dialogID:averageRatingInt :dialogID:totalRatingCount" />  
                                <p:ajax event="cancel" listener="#{webResourceBean.onRateCancel}" update=":dialogID:dialogGrowl :dialogID:averageRating :dialogID:averageRatingInt :dialogID:totalRatingCount" />  
                            </p:rating>
                        </h:panelGroup>
                        
                        <h:outputText id="tagThis" value="Tag this: " />  
                        <h:panelGroup>  
                            <p:inputText style="z-index: 20" id="tagThisText" value="#{webResourceBean.tagSuggestion}" />
                            <p:commandButton id="tagThisSubmit" value="Tag it!" update="tagThisText tags dialogGrowl" action="#{webResourceBean.addTag}"/>
                        </h:panelGroup>
                        
                        
                        <center>
                            <p:dataList rendered="#{not empty webResourceBean.selectedResult.lessons}" value="#{webResourceBean.selectedResult.lessons}" var="lesson" id="lessonTableID"  
                                    paginator="true" rows="20"  
                                    paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown}"  
                                    rowsPerPageTemplate="10,20,30" type="none">  

                            <f:facet name="header">  
                                Lessons (#{webResourceBean.selectedResult.lessons.size()})
                            </f:facet>
                            <h:outputLink id="url" value="#{lesson.url}" target="_blank" >
                                <h:outputText value="#{lesson.title}" style="margin-left:10px" />  
                            </h:outputLink>
                            
                            <br />  
                            </p:dataList>  
                        </center>

                    </h:panelGrid>  


                    <p:dataTable id="webResourceCommentTableID" 
                                 var="comment" 
                                 value="#{webResourceBean.commentList}" 
                                 emptyMessage="No Rows"
                                 rowKey="#{comment.id}"
                                 editable="true"

                                 >
                        <p:ajax  event="rowEdit" update=":dialogID:webResourceCommentTableID :dialogID:dialogGrowl" listener="#{webResourceBean.onEditCommentRow}"></p:ajax>

                        <f:facet name="header">
                            <h:outputText value="Comments" />
                        </f:facet>

                        <p:column sortBy="#{comment.time}" 
                                  headerText="Date" 
                                  >

                            <f:facet name="header">
                                <h:outputText value="Date" />
                            </f:facet>

                            <h:outputText id="commentTime" value="#{comment.time}" />
                        </p:column>


                        <p:column sortBy="#{comment.userText}" 
                                  headerText="User" 
                                  >
                            <f:facet name="header">
                                <h:outputText value="User" />
                            </f:facet>

                            <h:outputText id="commentUserText" value="#{comment.userText}" />
                        </p:column>

                        <p:column sortBy="#{comment.text}" 
                                  headerText="Comment" 
                                  >

                            <f:facet name="header">
                                <h:outputText value="Comment" />
                            </f:facet>

                            <p:cellEditor>  
                                <f:facet name="output">  
                                    <h:outputText value="#{comment.text}" />  
                                </f:facet>  
                                <f:facet name="input">  
                                    <p:inputText id="text" value="#{comment.text}"  style="width:100%"/>
                                </f:facet>  
                            </p:cellEditor>  
                        </p:column>

                        <p:column sortBy="#{comment.likeCount}" 
                                  headerText="Likes" 
                                  >

                            <f:facet name="header">
                                <h:outputText value="Likes" />
                            </f:facet>

                            <h:outputText id="commentLikeCount" value="#{comment.likeCount}" />
                        </p:column>


                        <p:column rendered="#{loginBean.loggedIn}" 
                                  headerText="Remove" 
                                  width="40">  

                            <p:commandButton rendered="#{webResourceBean.canUpdate(comment)}" style="align: center" icon="ui-icon-close" update=":dialogID:webResourceCommentTableID :dialogID:dialogGrowl"
                                             actionListener="#{webResourceBean.removeComment(comment)}" />  

                        </p:column>

                        <p:column rendered="#{loginBean.loggedIn}" 
                                  headerText="Like">  

                            <p:commandButton process="@this" immediate="true" id="likeComment" rendered="#{webResourceBean.canLikeComment(comment)}" style="align: center" icon="ui-icon-heart" update=":dialogID:webResourceCommentTableID :dialogID:dialogGrowl"
                                             actionListener="#{webResourceBean.likeComment(comment)}" />  
                            <p:commandButton process="@this" immediate="true" id="unlikeComment" rendered="#{!webResourceBean.canLikeComment(comment)}" style="align: center" icon="ui-icon-circle-minus" update=":dialogID:webResourceCommentTableID :dialogID:dialogGrowl"
                                             actionListener="#{webResourceBean.unlikeComment(comment)}" />  

                        </p:column>



                    </p:dataTable>

                    <br/>
                    <br/>
                    <h:outputText rendered="#{loginBean.loggedIn}" value="New Comment" /><h:outputText value="  "/>
                    <p:inputText size="50" rendered="#{loginBean.loggedIn}" id="newCommentTextID" value="#{webResourceBean.newCommentText}"/><h:outputText value="  "/>
                    <p:commandButton process="@this newCommentTextID"  rendered="#{loginBean.loggedIn}" style="align: center" icon="ui-icon-circle-check" update=":dialogID:webResourceCommentTableID :dialogID:dialogGrowl"
                                     actionListener="#{webResourceBean.addComment}" />  





                </p:outputPanel>  
            </h:form>
        </p:dialog>  


    </center>
</ui:composition>

